import '@/pages/Drag/sub-components/propertyConfig/propertyConfig.less';
import {uuid} from '@/utils/utils'
import {
  Input,Checkbox,Button
} from 'antd';

import {
  DeleteOutlined,
  PlusOutlined
} from '@ant-design/icons';

import {
  titleRender,isInline,
  fieldRender,checkRender,
  descRender,tipRender,
  fieldPermissionsRender,
  spanWidthRender
} from '@/components/ComponentConfig/commonItem';

type PropsType ={
  config:any,
  onChangeCallback:Function
}

function SelectConfig(props:PropsType){
  const {config} = props;
  const {props:compProps} = config;
  const setProps = (key:any,val:any)=>{
    const data = {...config,props:{...config.props,[key]:val}}
    props.onChangeCallback(data);
  }

  function selectRender(key:string){
    const onInputChange = (e:any,rindex:number,type:string)=>{
      const resArr = [...compProps[key]];
      resArr[rindex][type] = e.target.value;
      setProps(key,resArr);
    }

    const addLine = ()=>{
      const data = {...config}
      const inx = (data.props.options.length + 1);
      data.props.options.push({
        label:'选项' + inx,
        value: '值'+ inx,
        id:uuid()
      })
      props.onChangeCallback(data)
    }
    const delItem =(r:any)=>{
      const data = {...config}
      data.props.options = data.props.options.filter((v:any)=>v.value !== r.value);
      props.onChangeCallback(data)
    }
    return (
      <div className="item" key={key}>
        <h4 className="tit">选项：</h4>


        {config.props[key].map((r:any,rindex:number)=>(
          <div className="radioGroup" key={r.id} >
            <Input
              value={r.label}
              defaultValue={r.label}
              onChange={(e)=>onInputChange(e,rindex,'label')}
              className="input"
            />
            <Input
              value={r.value}
              defaultValue={r.value}
              // onChange={(e)=>onInputChange(e,rindex,'value')}
              onChange={(e)=>{
                // console.log(e)
                onInputChange(e,rindex,'value')
              }}
              className="input"
            />
            <DeleteOutlined onClick={()=>delItem(r)} />
          </div>
        ))}

        <div className="editBot">
          <Button size="small" icon={<PlusOutlined />} onClick={addLine}>添加选项</Button>
        </div>
      </div>
    )
  }
  function multipleRender(key:string){
    return (
      <div className="item" key={key}>
        <Checkbox
          checked={compProps[key]}
          onChange={(e)=>{
            setProps(key,e.target.checked)
          }}
        >
          多选
        </Checkbox>
      </div>
    )
  }
  return (
    <div>
      { titleRender(config,props,'title')}
      { fieldRender(config,props,'field')}
      { descRender(config,props,'describe')}

      {selectRender('options')}
      {multipleRender('multiple')}

      { fieldPermissionsRender(config,props,'fieldPermissions')}
      { checkRender(config,props,'check')}
      { isInline(config,props,'inline')}
      { spanWidthRender(config,props,'span')}
    </div>
  )
}
export default SelectConfig
